<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>indexedDB 示例代码</title>
    <link rel="stylesheet" href="./styles/index.css">
</head>
<body>
    <div id="app">
        <h1>indexedDB 示例代码</h1>
        <div class="page">
            <form class="base-form base-inline-form" id="search-form">
                <div class="base-form-item">
                    <label>姓名:</label>
                    <input type="text" class="base-input" data-key="name"/>
                </div>
                <div class="base-form-item">
                    <label>年龄:</label>
                    <input type="text" class="base-input" data-key="age"/>
                </div>
                <div class="base-form-item">
                    <label>电话:</label>
                    <input type="text" class="base-input" data-key="tel"/>
                </div>
                <div class="base-form-item">
                    <label>职业:</label>
                    <input type="text" class="base-input" data-key="job"/>
                </div>
                <div class="base-form-item">
                    <label>爱好:</label>
                    <input type="text" class="base-input" data-key="hobby"/>
                </div>
            </form>
            <div class="form-item-btnGroup">
                <button class="base-btn base-btn-primary" type="button" id="find-btn">查询</button>
                <button class="base-btn" type="button" id="reset-btn">重置</button>
            </div>
            <header class="table-header">
                <button class="base-btn base-btn-primary" type="button" id="add-data-btn">新增</button>
            </header>
            <div class="table-wrapper">
                <table class="base-table" id="tableData">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>电话</th>
                            <th>职业</th>
                            <th>爱好</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</body>
<script src="./plugins/modal.js"></script>
<script src="./plugins/message.js"></script>
<script src="./scripts/util.js"></script>
<script src="./scripts/index.js"></script>
</html>